.loader {
  --loader-width: 4em;
  --loader-stroke-color: var(--primary-color);
  --loader-stroke: 2px;
  --loader-border: 2px;
  --loader-border-color: var(--primary-color-transparent);

  @include circle(var(--loader-width));
  position: relative;
  box-shadow: inset 0 0 0 var(--loader-border) var(--loader-border-color);

  &::before {
    @include cover;
    content: "";
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--loader-stroke) var(--loader-stroke-color);
    clip-path: inset(0 50% 0 0);
    mask: linear-gradient(black, transparent);
    animation: spin 1s linear infinite;
  }
}
